<script setup lang="ts">
import { useAppsStore } from '@/stores/modules/app'
import { Logo, Wrapper, ClientPop, Search, User } from './pc/index'
import MenuDiv from './phone/meun.vue'
import { useThemeVars } from 'naive-ui'

const AddList = defineAsyncComponent(
  () => import('@/components/release/AddList.vue')
)

type PropsState = {
  scroll?: number
}
withDefaults(defineProps<PropsState>(), {
  scroll: 0
})
const useStore = useAppsStore()
const { getUserInfo: userInfo } = storeToRefs(useStore)
const { setLoginShow } = useStore
const themeVars = useThemeVars()

const { width } = useWindowSize()

const route = useRoute()

const addRef = ref()
const handAdd = () => {
  if (userInfo.value?.id) {
    addRef.value.open()
  } else {
    setLoginShow(true)
  }
}
</script>

<template>
  <nav
    class="norem-manga-navbar"
    :style="{
      '--n-color': themeVars.primaryColor
    }"
    v-if="route.path !== '/mhdetail'"
  >
    <div class="norem-manga-navbar-main">
      <template v-if="width <= 800">
        <Logo />
        <menu-div />
      </template>
      <template v-else>
        <Logo />
        <wrapper :scroll="scroll" />
        <div class="manga-navbar-right flex align-center">
          <search />
          <client-pop />
          <user />
          <n-button class="norem-tougao" type="primary" @click="handAdd">
            投稿
          </n-button>
        </div>
      </template>
    </div>
  </nav>
  <add-list ref="addRef" />
</template>

<style scoped lang="scss">
.norem-manga-navbar {
  min-width: 850px;
  background-color: #fff;
  box-shadow: 0 0 5px 1px rgba(158, 179, 193, 0.5);
  height: 50px;
  overflow: visible;
  z-index: 1001;
  padding: 0 10px;
  position: relative;

  &-main {
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .norem-tougao {
      margin-left: 10px;
      height: 30px;
    }
  }
}

@media (max-width: 800px) {
  .norem-manga-navbar {
    min-width: 100%;
    height: 40px;

    &-main {
      max-width: 100%;
      justify-content: space-between;
    }
  }
}
</style>
